﻿.panel {
    display: flex;
    position: relative;
    background-color: white;
    padding: 5px;
    padding-top: 20px;
    gap: 5px;
    user-select: none;
}

    .panel.root {
        border-width: 0;
        padding: 5px;
    }

    .panel.empty {
        min-height: 50px;
    }

    .panel:not(.root).panel-active {
        background-color: #f3f3f3;
    }

    .panel.horizontal {
        flex-direction: row;
        align-items: start;
    }

    .panel.vertical {
        flex-direction: column;
    }

        .panel.vertical ::deep > * {
            width: 100%;
        }

    .panel::after {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        right: 0;
        bottom: 0;
        border: 1px dashed #ccc;
        pointer-events: none;
    }

    .panel.root::after {
        border-width: 0;
    }

    .panel.sortable-ghost {
        border: 1px solid #d35400;
    }

    .panel .panel-title {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 8px;
        top: 0;
        left: 5px;
        width: fit-content;
        height: 16px;
        background-color: white;
        z-index: 1;
    }

    .panel.panel-active > .panel-title {
        background-color: #f3f3f3;
    }

    .panel .panel-title .panel-direction {
        cursor: pointer;
    }

    .panel ::deep > .panel-tools {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: right;
        gap: 5px;
        right: 0;
        top: 0;
        width: fit-content;
        height: 24px;
        padding: 5px;
        border: 1px dashed #ccc;
        border-right: none;
        border-top: none;
        background-color: #f3f3f3;
        visibility: hidden;
        opacity: 0;
    }

    .panel.panel-active:hover ::deep > .panel-tools {
        transition: opacity 0.5s;
        visibility: visible;
        opacity: 1;
        z-index: 1;
    }

    .panel ::deep > .panel-tools > .panel-tool {
        cursor: pointer;
    }

    .panel.root ::deep > .panel-tools > .panel-tool.tool-delete {
        display: none;
    }

    .panel ::deep .component-tool.sortable-ghost,
    .panel ::deep .entity-property-node.sortable-ghost {
        border: 1px solid #d35400;
        border-radius: 5px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
    }

        .panel ::deep .component-tool.sortable-ghost *,
        .panel ::deep .entity-property-node.sortable-ghost * {
            display: none;
        }
